<template>
	<view>

		<view class="header">
			<image @click="goBackM" style="width: 2rem;height:2rem;position: absolute;top: 0.5rem;z-index: 99;
			  left: 0.5rem;"
			 src="../../style/image/myPos/backMap.png" alt="">
				<u-upload ref="uUpload" :auto-upload="true" width=500 height=400 :max-count='1' :action="action" :file-list="fileList"></u-upload>
		</view>

		<view class="inputS">
			<u-form :model="form" ref="uForm">

				<u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="租借商户:">
					<u-input placeholder='请输入租借商户' v-model="form.name" />
				</u-form-item>

				<u-form-item style="padding: 0.7rem 1rem" prop="name" :disabled='true' label-width="auto" label="租借地点:">
					<view slot="right">
						<view>
							<image @click="goMap" style="width: 0.6rem;padding: 0rem 0.5rem;height: 1rem;" src="../../style/image/myPos/map.png"
							 alt="">
						</view>
					</view>
					<u-input v-model="form.address" :disabled='true' placeholder="请选择租借地点" />
				</u-form-item>

				<!-- <u-form-item placeholder="123" style="padding: 0.7rem 1rem" prop="name" label-width="auto" label="租借地点:">
					<view slot="right" >
						<view>
						   <image @click="goMap"  style="width: 1rem;height: 1.5rem;" src="../../style/image/myPos/map.png" alt="">
						</view>
					</view>
					<u-input placeholder='请选择租借地点' type="textarea" v-model="form.address"/>
				</u-form-item> -->

				<u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="地址备注:">
					<u-input placeholder='请输入地址备注' v-model="form.note" />
				</u-form-item>
			</u-form>
		</view>

		<view class="footP">
			<view @click="addPosM" style="padding: 0.7rem;display: flex;align-items: center;">
				<!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
				<view style="color: white;margin-left: 0.2rem;">提交</view>
			</view>
		</view>

	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from 'vue-property-decorator'

	import {
		saveShopInfo
	} from "../../utils/uniApi";


	@Component({ //   @Component  是一个装修器   不可以在下面写语句
		name: 'test',
	})


	export default class extends Vue {

		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		}) msg!: string;

		public form = {
			name: "",
			address: "",
			note: "",
		};
		public action: any = ''; //图片上传地址
		public shopId: any; //商户id
		public shopLogo: any; //商户图片
		public coordinate: any; //经纬度
		public fileList: any = []; //图片数组
		public provinceName = ""; //省
		public cityName = ""; //市
		public districtName = ""; //区

		created() {

		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
			//  uni.navigateTo({
			// url: './selectBusin'
			// });
		}

		onLoad(value: any) {
			var shopDic = JSON.parse(decodeURIComponent(value.shopDic))
			var dicPic: any = {
				'url': shopDic.shopLogo
			};
			// console.log('输出图片的字典：'+JSON.stringify(dicPic))
			this.fileList.push(dicPic);
			this.shopId = shopDic.id;
			this.form.name = shopDic.shopName
			var addressList = shopDic.address.split('-');
			if (addressList.length > 1) {
				this.form.note = addressList[1];
			}
			this.form.address = addressList[0];
		}


		goMap() {
			uni.chooseLocation({
				success: (data) => {
					// console.log('地图的返回数据：'+JSON.stringify(data))
					this.coordinate = data.longitude + ',' + data.latitude;
					var reg = /.+?(省|市|自治区|自治州|县|区)/g;
					var submitAddress = data.address;
					this.provinceName = (submitAddress as any).match(reg)[0]; //	省
					this.cityName = (submitAddress as any).match(reg)[1]; //	市
					this.districtName = (submitAddress as any).match(reg)[2]; // 区
					this.form.address = this.provinceName + this.cityName + this.districtName
					this.form.note = submitAddress.replace(this.form.address, '')
				}
			})
		}

		addPosM() {
			// // this.$refs.uUpload.upload();//上传图片到服务器
			// let files = [];
			// // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
			// files = this.$refs.uUpload.lists.filter(val => {
			// 	return val.progress == 100;
			// })
			// // 如果您不需要进行太多的处理，直接如下即可
			// // files = this.$refs.uUpload.lists;
			// console.log(files)
			// if(files.length>0){
			// 	this.shopLogo = files[0].url;
			// }

			let params = {
				id: parseInt(this.shopId),
				shopLogo: this.shopLogo, //	商铺图片
				shopName: this.form.name, //	商户名称
				address: this.form.address + '-' + this.form.note, //	商户地址
				coordinate: this.coordinate, //经纬度
			}
			console.log('修改商户信息参数' + JSON.stringify(params))

			saveShopInfo(params).then((res: any) => {
				console.log('++++修改商户信息', JSON.stringify(res))
				if (res.data.code == 200) {
					//提交成功后    返回
					uni.navigateBack({
						delta: 1,
					});
				} else {

				}

			})
		}

		goBackM() {
			uni.navigateBack({
				delta: 1,
			});
		}

	}
</script>

<style scoped>
	.header>>>.u-list-item {
		width: 13rem;
		height: 110px;
	}



	.inputS>>>.u-icon__icon {
		font-size: inherit;
		font-weight: normal;
		top: 0px;
		color: red;
	}

	.header {

		background-color: #f4f5f6;

	}

	.u-upload {

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;

		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		justify-content: center;
		padding: 3rem;
	}

	.footP {
		z-index: 99;
		position: absolute;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
